<template>
  <!-- 登陆和注册 -->
  <div v-if="!$common.isEmpty(currentUser)" class="myCenter in-up-container my-animation-hideToShow">
    <!-- 背景图片 -->
    <el-image class="my-el-image" style="position: absolute" v-once lazy
      :src="$constant.two_poem_image[Math.floor(Math.random() * $constant.two_poem_image.length)]" fit="cover">
      <div slot="error" class="image-slot"></div>
    </el-image>
    <div class="in-up" id="loginAndRegist">
      <div class="form-container sign-up-container">
        <div class="myCenter">
          <h1>注册</h1>
          <input v-model="username" type="text" maxlength="30" placeholder="用户名">
          <input v-model="password" type="password" maxlength="30" placeholder="密码">
          <input v-model="email" type="email" placeholder="邮箱">
          <input v-model="code" type="text" placeholder="验证码">
          <span style="margin: 0;cursor: pointer;" @click="changeDialog('邮箱验证码')">获取验证码</span>
          <button @click="regist()">注册</button>
        </div>
      </div>
      <div class="form-container sign-in-container">
        <div class="myCenter">
          <h1>登录</h1>
          <input v-model="account" type="text" placeholder="用户名/邮箱/手机号">
          <input v-model="password" type="password" placeholder="密码">
          <span style="cursor: pointer;" @click="changeDialog('找回密码')">忘记密码？</span>
          <button @click="handleLogin()">登录</button>
        </div>
      </div>
      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panel myCenter overlay-left">
            <h1>已有帐号？</h1>
            <p>请登录🚀</p>
            <button class="ghost" @click="signIn()">登录</button>
          </div>
          <div class="overlay-panel myCenter overlay-right">
            <h1>没有帐号？</h1>
            <p>立即注册吧😃</p>
            <button class="ghost" @click="signUp()">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <el-dialog :title="dialogTitle" v-model="showDialog" width="30%" :before-close="clearDialog" :append-to-body="true"
    :close-on-click-modal="false" center>
    <div class="myCenter" style="flex-direction: column">
      <div>
        <div v-if="dialogTitle === '修改手机号' || dialogTitle === '绑定手机号'">
          <div style="margin-bottom: 5px">手机号：</div>
          <el-input v-model="phoneNumber"></el-input>
          <div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
          <el-input v-model="code"></el-input>
          <div style="margin-top: 10px;margin-bottom: 5px">密码：</div>
          <el-input v-model="password"></el-input>
        </div>
        <div v-else-if="dialogTitle === '修改邮箱' || dialogTitle === '绑定邮箱'">
          <div style="margin-bottom: 5px">邮箱：</div>
          <el-input v-model="email"></el-input>
          <div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
          <el-input v-model="code"></el-input>
          <div style="margin-top: 10px;margin-bottom: 5px">密码：</div>
          <el-input v-model="password"></el-input>
        </div>
        <div v-else-if="dialogTitle === '修改头像'">
          <uploadPicture :prefix="'userAvatar'" @addPicture="addPicture" :maxSize="1" :maxNumber="1"></uploadPicture>
        </div>
        <div v-else-if="dialogTitle === '找回密码'">
          <div class="myCenter" style="margin-bottom: 12px">
            <el-radio-group v-model="passwordFlag">
              <el-radio :label="1" style="margin-right: 10px">手机号</el-radio>
              <el-radio :label="2">邮箱</el-radio>
            </el-radio-group>
          </div>
          <div v-if="passwordFlag === 1">
            <div style="margin-bottom: 5px">手机号：</div>
            <el-input v-model="phoneNumber"></el-input>
            <div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
            <el-input v-model="code"></el-input>
            <div style="margin-top: 10px;margin-bottom: 5px">新密码：</div>
            <el-input maxlength="30" v-model="password"></el-input>
          </div>
          <div v-else-if="passwordFlag === 2">
            <div style="margin-bottom: 5px">邮箱：</div>
            <el-input v-model="email"></el-input>
            <div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
            <el-input v-model="code"></el-input>
            <div style="margin-top: 10px;margin-bottom: 5px">新密码：</div>
            <el-input maxlength="30" v-model="password"></el-input>
          </div>
        </div>
        <div v-else-if="dialogTitle === '邮箱验证码'">
          <div>
            <div style="margin-bottom: 5px">邮箱：</div>
            <el-input v-model="email"></el-input>
            <div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
            <el-input v-model="code"></el-input>
          </div>
        </div>
      </div>
      <div style="display: flex;margin-top: 30px" v-show="dialogTitle !== '修改头像'">
        <proButton :info="codeString"
          v-show="dialogTitle === '修改手机号' || dialogTitle === '绑定手机号' || dialogTitle === '修改邮箱' || dialogTitle === '绑定邮箱' || dialogTitle === '找回密码' || dialogTitle === '邮箱验证码'"
          @click.native="getCode()" :before="$constant.before_color_1" :after="$constant.after_color_1"
          style="margin-right: 20px">
        </proButton>
        <proButton :info="'提交'" @click.native="submitDialog()" :before="$constant.before_color_2"
          :after="$constant.after_color_2">
        </proButton>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from 'vue'
import { useStore } from 'vuex';
import { register, sendMail } from "@/api/user"
import common from '@/utils/common'
import { Snackbar } from '@varlet/ui'
import proButton from "@/components/common/proButton.vue"
import { useRouter } from "vue-router";
export default {
  name: '',
  components: { proButton },
  setup() {
    const store = useStore()
    const rotuer = useRouter()
    const data = reactive({
      currentUser: computed(() => {
        return store.state.currentUser;
      }),
      username: "",
      password: "",
      email: "",
      code: "",
      dialogTitle: "邮箱验证码",
      showDialog: false,
      codeString: "验证码",
      passwordFlag: null,
      intervalCode: null,
      avatar: "",
      account: "",
    })
    const signUp = () => {
      document.querySelector("#loginAndRegist").classList.add('right-panel-active');
    }

    const signIn = () => {
      document.querySelector("#loginAndRegist").classList.remove('right-panel-active');
    }
    const changeDialog = (value) => {
      if (value === "邮箱验证码") {
        if (common.isEmpty(data.email)) {
          Snackbar.error("请输入邮箱！")
          return false;
        }
        if (!(/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(data.email))) {
          Snackbar.error("邮箱格式有误！")
          return false;
        }
      }

      data.dialogTitle = value;
      data.showDialog = true;
    }
    const regist = () => {
      if (common.isEmpty(data.username) || common.isEmpty(data.password)) {
        Snackbar.error("请输入用户名或密码！")
        return;
      }

      if (data.dialogTitle === "邮箱验证码" && common.isEmpty(data.email)) {
        Snackbar.error("请输入邮箱！")
        return false;
      }

      if (common.isEmpty(data.code)) {
        Snackbar.error("请输入验证码！")
        return;
      }

      if (data.username.indexOf(" ") !== -1 || data.password.indexOf(" ") !== -1) {
        Snackbar.error("用户名或密码不能包含空格！")
        return;
      }

      let user = {
        username: data.username.trim(),
        code: data.code.trim(),
        password: data.password,
        email: data.email
      };

      if (data.dialogTitle === "邮箱验证码") {
        //user.code = data.code;
      }

      //注册
      register(user)
        .then((res) => {
          // Snackbar.error("error.message")
          // data.$store.commit("loadCurrentUser", res.data);
          // localStorage.setItem("userToken", res.data.accessToken);
          data.username = "";
          data.password = "";
          data.code = "";
          data.email = "";
          Snackbar.success(res.message)
          document.querySelector("#loginAndRegist").classList.remove('right-panel-active');
          // data userToken = common.encrypt(localStorage.getItem("userToken"));
          // window.open(data.$constant.imBaseURL + "?userToken=" + userToken);
        }).catch(error => {

        })

    }
    const submitDialog = () => {
      if (data.dialogTitle === "找回密码") {
        if (data.passwordFlag !== 1 && data.passwordFlag !== 2) {
          Snackbar.error("请选择找回方式！")
        } else {
          updateSecretInfo();
        }
      } else if (data.dialogTitle === "邮箱验证码") {
        data.showDialog = false;
      }
    }
    // 发送验证码
    const getCode = () => {
      if (data.codeString === "验证码") {
        // 获取验证码
        let params = {};
        if (!checkParams(params)) {
          return;
        }

        let url;
        if (data.dialogTitle === "找回密码" || data.dialogTitle === "邮箱验证码") {
          url = "/user/getCodeForForgetPassword";
        } else {
          url = "/user/getCodeForBind";
        }

        sendMail({ mail: params.place }).then((res) => {
          Snackbar.success("验证码已发送，请注意查收！")
          data.codeString = "30";
          data.intervalCode = setInterval(() => {
            if (data.codeString === "0") {
              clearInterval(data.intervalCode)
              data.codeString = "验证码";
            } else {
              data.codeString = (parseInt(data.codeString) - 1) + "";
            }
          }, 1000);
        }).catch(err => {
          data.codeString = "验证码"
        })

      } else {
        Snackbar.warning("请稍后再试！")
      }
    }
    const checkParams = (params) => {
      if (data.dialogTitle === "修改手机号" || data.dialogTitle === "绑定手机号" || (data.dialogTitle === "找回密码" && data.passwordFlag === 1)) {
        params.flag = 1;
        if (common.isEmpty(data.phoneNumber)) {
          Snackbar.error("请输入手机号！")
          return false;
        }
        if (!(/^1[345789]\d{9}$/.test(data.phoneNumber))) {
          Snackbar.error("手机号格式有误！")
          return false;
        }
        params.place = data.phoneNumber;
        return true;
      } else if (data.dialogTitle === "修改邮箱" || data.dialogTitle === "绑定邮箱" || data.dialogTitle === "邮箱验证码" || (data.dialogTitle === "找回密码" && data.passwordFlag === 2)) {
        params.flag = 2;
        if (common.isEmpty(data.email)) {
          Snackbar.error("请输入邮箱！")
          return false;
        }
        if (!(/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(data.email))) {
          Snackbar.error("邮箱格式有误！")
          return false;
        }
        params.place = data.email;
        return true;
      }
      return false;
    }
    // 登录
    const handleLogin = () => {
      if (common.isEmpty(data.account) || common.isEmpty(data.password)) {
        Snackbar.error("请输入账号或密码！")
        return;
      }
      let user = {
        username: data.account.trim(),
        password: data.password.trim()
      };
      store.dispatch("loginAction", user).then(response => {
        Snackbar.success("登陆成功")
        //路由跳转
        rotuer.push({ path: "/home-index" });
        data.account = ""
        data.password = ""
      }).catch(error => {
        // Snackbar.success("登陆成功")
      })
    }
    onMounted(() => {

    })
    return {
      ...toRefs(data),
      signUp,
      signIn,
      regist,
      changeDialog,
      getCode,
      submitDialog,
      handleLogin,
    }
  },
}

</script>
<style scoped>
.in-up-container {
  height: 100vh;
  position: relative;
}

.in-up {
  opacity: 0.9;
  border-radius: 10px;
  box-shadow: 0 15px 30px var(--miniMask), 0 10px 10px var(--miniMask);
  position: relative;
  overflow: hidden;
  width: 750px;
  max-width: 100%;
  min-height: 450px;
  margin: 10px;
}

.in-up p {
  font-size: 14px;
  letter-spacing: 1px;
  margin: 20px 0 30px 0;
}

.in-up a {
  color: var(--black);
  font-size: 14px;
  text-decoration: none;
  margin: 15px 0;
}

.form-container {
  position: absolute;
  height: 100%;
  transition: all 0.5s ease-in-out;
}

.sign-in-container {
  left: 0;
  width: 50%;
}

.sign-up-container {
  left: 0;
  width: 50%;
  opacity: 0;
}

.form-container div {
  background: var(--white);
  flex-direction: column;
  padding: 0 20px;
  height: 100%;
}

.form-container input {
  background: var(--maxLightGray);
  border-radius: 2px;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
  width: 100%;
  outline: none;
}

.in-up button {
  border-radius: 2rem;
  border: none;
  background: var(--lightRed);
  color: var(--white);
  font-size: 16px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 2px;
  cursor: pointer;
}

.in-up button:hover {
  animation: scale 0.8s ease-in-out;
}

.in-up button.ghost {
  background: transparent;
  border: 1px solid var(--white);
}

.sign-up-container button {
  margin-top: 20px;
}

.overlay-container {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.overlay {
  background: var(--gradualRed);
  color: var(--white);
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
}

.overlay-panel {
  position: absolute;
  top: 0;
  flex-direction: column;
  height: 100%;
  width: 50%;
  transition: all 0.5s ease-in-out;
}

.overlay-right {
  right: 0;
  transform: translateY(0);
}

.overlay-left {
  transform: translateY(-20%);
}

.in-up.right-panel-active .sign-in-container {
  transform: translateY(100%);
}

.in-up.right-panel-active .overlay-container {
  transform: translateX(-100%);
}

.in-up.right-panel-active .sign-up-container {
  transform: translateX(100%);
  opacity: 1;
}

.in-up.right-panel-active .overlay {
  transform: translateX(50%);
}

.in-up.right-panel-active .overlay-left {
  transform: translateY(0);
}

.in-up.right-panel-active .overlay-right {
  transform: translateY(20%);
}

.user-container {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.user-info {
  width: 80%;
  z-index: 10;
  margin-top: 70px;
  height: calc(100vh - 90px);
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}

.user-left {
  width: 50%;
  background: var(--maxMaxWhiteMask);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 20px;
}

.user-right {
  width: 50%;
  background: var(--maxWhiteMask);
  padding: 20px;
}

.user-title {
  text-align: right;
  user-select: none;
}

.user-content {
  text-align: left;
}

.user-title div {
  height: 55px;
  line-height: 55px;
  text-align: center;
}

.user-content>div {
  height: 55px;
  display: flex;
  align-items: center;
}

.user-content>>>.el-input__inner,
.user-content>>>.el-textarea__inner {
  border: none;
  background: var(--whiteMask);
}

.user-content>>>.el-input__count {
  background: var(--transparent);
  user-select: none;
}

.changeInfo {
  color: var(--white);
  font-size: 0.75rem;
  cursor: pointer;
  background: var(--themeBackground);
  padding: 3px;
  border-radius: 0.2rem;
  user-select: none;
}

@media screen and (max-width: 920px) {
  .user-info {
    width: 90%;
  }

  .user-left {
    width: 100%;
  }

  .user-right {
    display: none;
  }
}
</style>